import React,{PureComponent,Fragment} from 'react'
import './icon.css'
import './App.scss'
class App extends PureComponent{
  state={
    phoneNumber:'',
    verificationCode:'',
    check:false,
    alarm:''
  }
  test=(text)=>{
    this.setState(
      {alarm:text}
    )
  }
  login=()=>{
     !/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.state.phoneNumber) ?
     this.test('手机号码格式错误，请更换后重试')
     : !/^\d{6}$/.test(this.state.verificationCode) ? 
     this.test('短信验证码格式错误') :this.test('')
  }
  handleChange=(e)=>{
    // console.log(JSON.parse(e.currentTarget.dataset.params))
    let {type,name}=JSON.parse(e.currentTarget.dataset.params)
    this.setState({
      [name]:type==='number' ? 
      name==='phoneNumber' ? 
      e.target.value.slice(0,11) : e.target.value.slice(0,6) : 
      e.target.nextElementSibling.checked
    })
  }
  render(){
    return(
      <Fragment>
        <div className="header">
          <div className="header-left"></div>
          <div className="header-middle"></div>
          <div className="header-right">
            <span></span>
            <span></span>
          </div>
        </div>
        <div className="login">
            <img src="./images/logo.png" alt=""/>
            <div className="phone">
              {/* 手机号码 */}
              <input 
                type="number" 
                placeholder="请输入手机号码"
                pattern="\d{11}"
                value={this.phoneNumber} 
                data-params={JSON.stringify({type:'number',name:'phoneNumber'})}
                onChange={this.handleChange}
              />
            </div>
            <div className="code">
              {/* 验证码 */}
              <input 
                type="number" 
                placeholder="请输入验证码"
                data-params={JSON.stringify({type:'number',name:'verificationCode'})}
                value={this.verificationCode} 
                onChange={this.handleChange}
              />
              <span>获取验证码</span>
            </div>
            {
              this.state.alarm ? 
              <div className="alarm">{this.state.alarm}</div>:
              ''
            }
            <div className="login-other">
              <div>遇到问题?</div>
              <div>使用密码验证登录</div>
            </div>
            <div 
            className='login-btn'
            onClick={this.login}
            >
              登录
            </div>
            <div className="login-clause">
              <div>
                <label 
                  className={"iconfont "+(this.state.check ? 'icon-gou-' : '')} 
                  htmlFor="select" 
                  data-params={JSON.stringify({type:'checkbox',name:'check'})}
                  onClick={this.handleChange}
                ></label>
                {/* 勾选框 */}
                <input 
                  type="checkbox" 
                  id="select" 
                  checked={this.check}
                />
              </div>
              <div>
                <span>我同意</span>
                <span>《服务条款》</span>
                <span>和</span>
                <span>《网易隐私政策》</span>
              </div>
            </div>
            <div className="login-else">
              其他登录方式 {">"}
            </div>
        </div>
      </Fragment>
    )
  }
}
export default App